<template>
  <div>
    <!-- 查询条件 -->
    <el-form :inline="true" size="small" class="filter-form" @submit.native.prevent>
      <el-form-item label="患者">
        <el-input v-model="filters.patient" placeholder="患者"></el-input>
      </el-form-item>
      <el-form-item label="身份证">
        <el-input v-model="filters.idCard" placeholder="身份证"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="filters.phone" placeholder="电话"></el-input>
      </el-form-item>
      <el-form-item label="就诊卡">
        <el-input v-model="filters.card" placeholder="就诊卡"></el-input>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="filters.dateRange"
          type="daterange"
          range-separator="—"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button>批量操作</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%; margin-top: 20px;">
      <el-table-column prop="index" label="序号" width="60">
        <template slot-scope="scope">
          {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="id" label="id" width="80"></el-table-column>
      <el-table-column prop="doctorName" label="医生"></el-table-column>
      <el-table-column prop="deptName" label="科室"></el-table-column>
      <el-table-column prop="classes" label="综合评分"></el-table-column>
      <el-table-column prop="consultationNo" label="订单编号"></el-table-column>
      <el-table-column prop="type" label="订单类型"></el-table-column>
      <el-table-column prop="suffererName" label="患者"></el-table-column>
      <el-table-column prop="content" label="评价内容"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.status == '0' ? '显示' : '隐藏' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="IssuingTime" label="创建时间"></el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <el-link class="action-link" type="primary" @click="handleView(scope.row)">查看</el-link>
          <el-link class="action-link" type="info" @click="handleToggle(scope.row)">
            {{ scope.row.status == '0' ? '隐藏' : '显示' }}
          </el-link>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div style="margin: 20px 0; text-align: left;">
      <el-pagination
        background
        layout="prev, pager, next, sizes, jumper"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :page-sizes="[10]"
      ></el-pagination>
    </div>

    <!-- 查看弹窗 -->
    <el-dialog
      title="评价详情"
      :visible.sync="dialogVisible"
      width="600px"
      :close-on-click-modal="false"
    >
      <el-form label-width="100px" label-position="left">
        <el-form-item label="医生">
          <el-input v-model="currentRow.doctorName" disabled></el-input>
        </el-form-item>
        <el-form-item label="科室">
          <el-input v-model="currentRow.deptName" disabled></el-input>
        </el-form-item>
        <el-form-item label="患者">
          <el-input v-model="currentRow.classes" disabled></el-input>
        </el-form-item>
        <el-form-item label="订单编号">
          <el-input v-model="currentRow.consultationNo" disabled></el-input>
        </el-form-item>
        <el-form-item label="订单类型">
          <el-input v-model="currentRow.type" disabled></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-input v-model="currentRow.IssuingTime" disabled></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-tag :type="currentRow.status === 0 ? 'success' : 'info'">
            {{ currentRow.status === 0 ? '显示' : '隐藏' }}
          </el-tag>
        </el-form-item>
        <el-form-item label="评价内容">
          <el-input
            type="textarea"
            :rows="6"
            v-model="currentRow.content"
            disabled
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      filters: {
        patient: '',
        idCard: '',
        phone: '',
        card: '',
        dateRange: [],
      },
      tableData: [
        {
          index: 1, id: 24235, doctor: '医生1', department: '科室1', score: 4.5, orderNo: '10001', orderType: '图文', patient: '患者1', content: '主任很耐心，和蔼可亲', status: '显示', createdAt: '2022-05-06', show: true
        },
        {
          index: 2, id: 24235, doctor: '医生2', department: '科室2', score: 4, orderNo: '10001', orderType: '图文', patient: '患者2', content: '主任很耐心，宝宝被吓哭了', status: '显示', createdAt: '2022-05-06', show: true
        },
        // ... 其余数据
      ],
      total: 9,
      pageSize: 10,
      currentPage: 1,
      dialogVisible: false,
      currentRow: {},
    }
  },
  methods: {
    async handleSearch() {
      const params = {
        patient: this.filters.patient,
        idCard: this.filters.idCard,
        phone: this.filters.phone,
        card: this.filters.card,
        startDate: this.filters.dateRange[0] || '',
        endDate: this.filters.dateRange[1] || '',
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }
      try {
        const res = await axios.post('/assess/page', params)
        if (res.data && res.data.code === 200) {
          this.tableData = res.data.data.list
          this.total = res.data.data.total
        } else {
          this.$message.error(res.data.msg || '查询失败')
        }
      } catch (e) {
        this.$message.error('网络异常')
      }
    },
    async handleView(row) {
      try {
        // 调用后端接口，传递 id
        const res = await axios.get('/assess/getByAssess', { params: { id: row.id } })
        if (res.data && res.data.code === 200) {
          // 假设返回的是一个数组，取第一个
          this.currentRow = res.data.data[0] || {}
          this.dialogVisible = true
        } else {
          this.$message.error(res.data.msg || '获取详情失败')
        }
      } catch (e) {
        this.$message.error('网络异常')
      }
    },
    async handleToggle(row) {
      try {
        // 调用后端接口，传递 id
        const res = await axios.post('/assess/updateStatus', { id: row.id })
        if (res.data && res.data.code === 200) {
          // 切换本地状态（假设后端已切换成功）
          row.status = row.status === '0' ? '1' : '0'
          row.show = row.status === '0'
          this.$message.success('操作成功')
        } else {
          this.$message.error(res.data.msg || '操作失败')
        }
      } catch (e) {
        this.$message.error('网络异常')
      }
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.currentPage = 1
      this.handleSearch()
    },
    handlePageChange(page) {
      this.currentPage = page
      this.handleSearch()
    }
  },
  mounted() {
    this.handleSearch()
  }
}
</script>

<style scoped>
.filter-form {
  margin-bottom: 20px;
}
.action-link {
  color: #00a0e9 !important;   /* 蓝色 */
  text-decoration: underline !important; /* 下划线 */
  margin-right: 24px;           /* 两个按钮间距 */
  font-size: 16px;              /* 字体大小可根据实际调整 */
  cursor: pointer;
  padding: 0;
}
.action-link:last-child {
  margin-right: 0;
}
</style>
